<template>
	<view>
		<view class="item">
			<view class="item-header">{{title}}</view>
			<view class="item-body">
				{{value}}
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		title:{
			type:String,
			default:''
		},
		value:{
			type:[String,Number],
			default:''
		}
	})
</script>

<style lang="scss">
	$radius: 15px 15px 0 0;
	.item {
		width: 350rpx;
		height: 200rpx;
		background-color: #fff;
		border: 2rpx #c9cbc6 solid;
		border-radius: $radius;

		.item-body {
			height: calc(200rpx - 30px);
			display: flex;
			justify-content: center;
			align-items: center;
			color: #000;
			font-size: 28rpx;
			font-weight: 600;
		}

		.item-header {
			border-radius: $radius;
			height: 30px;
			width: 100%;
			background-color: #a2ef4d;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			align-content: center;
		}
	}
</style>